<template>
  <el-dialog title="编辑表格" :visible="show" width="730px" @opened="onOpenExcelDialog" @close="closeExcelDialog">
    <div :class="`sheetBox-${id}`" class="sheetBox"></div>
    <div slot="footer" class="d-flex jc-between">
      <div></div>
      <!-- <el-button type="text" @click="handleClearData">清空数据</el-button> -->
      <div>
        <el-button @click="closeExcelDialog">取消</el-button>
        <el-button type="primary" @click="handleSaveSheetData">保存数据</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  import XLSX from 'xlsx';
  import { deepClone } from '@/utils';
  import Spreadsheet from 'x-data-spreadsheet';
  import 'x-data-spreadsheet/dist/locale/zh-cn';
  Spreadsheet.locale('zh-cn');
  import { xtos } from '@/plugins/xlsxspread.js';

  export default {
    model: { prop: 'tableData' },

    props: {
      id: { type: String, default: '' },
      show: { type: Boolean, default: false },
      cols: { type: Number, default: 26 },
      rows: { type: Number, default: 100 },
      tableData: { type: Object, default: () => ({}) },
      showToolbar: { type: Boolean, default: false },
      showContextmenu: { type: Boolean, default: false }
    },

    data() {
      this.options = {
        showToolbar: this.showToolbar,
        showContextmenu: this.showContextmenu,
        showBottomBar: false,
        view: {
          height: () => document.querySelector(`.sheetBox-${this.id}`)?.clientHeight,
          width: () => document.querySelector(`.sheetBox-${this.id}`)?.clientWidth
        },
        row: { height: 30, len: this.rows },
        col: { width: 90, len: this.cols }
      };
      return {
        showExcelDialog: false
      };
    },

    methods: {
      onOpenExcelDialog() {
        this.sheetEditor
          ? this.sheetEditor.sheet.reload()
          : (this.sheetEditor = new Spreadsheet(`.sheetBox-${this.id}`, this.options));
        this.sheetEditor.loadData(deepClone(this.tableData));
      },

      handleSaveSheetData() {
        const data = this.sheetEditor.getData();
        if (data[0] && Object.keys(data[0].rows).length <= 1) {
          this.$message.error('请输入表格数据');
          return;
        }
        const html = this.createTableHTML(data);
        this.$emit('updateContent', html);
        this.$emit('input', data[0]);
        this.closeExcelDialog();
      },

      handleClearData() {
        this.sheetEditor.loadData({});
      },

      createTableHTML(spreadSheetData) {
        const workbook = xtos(spreadSheetData);
        const worksheet = workbook.Sheets[workbook.SheetNames[0]];
        return XLSX.utils.sheet_to_html(worksheet, { header: '' });
      },

      closeExcelDialog() {
        this.$emit('update:show', false);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .sheetBox ::v-deep {
    width: 682px;
    height: 320px;

    * {
      box-sizing: content-box;
    }

    .x-spreadsheet-toolbar {
      padding: 0;
      width: 100% !important;

      .x-spreadsheet-toolbar-btns {
        width: 100%;
      }
    }

    .x-spreadsheet-contextmenu .x-spreadsheet-item {
      &:nth-child(4),
      &:nth-child(5),
      &:nth-last-child(-n + 10) {
        display: none;
      }
    }
  }
</style>
